<!-- 会员审核 -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="formInline" @onSubmit="onSubmit" @resetTable="resetTable">
            <el-form-item label="姓名">
                <el-input v-model="formInline.name" placeholder="输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="审核状态">
                <el-select v-model="formInline.status" placeholder="选择审核状态" @change="changeDateSelect">
                    <el-option label="全部" :value="0"></el-option>
                    <el-option label="审核通过" :value="1"></el-option>
                    <el-option label="未审核" :value="2"></el-option>
                    <el-option label="拒绝审核" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <!-- <el-form-item label="时间">
                <el-date-picker v-model="pickerDateArr" type="date" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDatePicker"></el-date-picker>
            </el-form-item> -->
            <el-form-item label="电话号码">
                <el-input v-model="formInline.tel" placeholder="电话号码"></el-input>
            </el-form-item>
            <el-form-item label="时间">
                <el-date-picker v-model="pickerDateArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDatePicker"></el-date-picker>
            </el-form-item>
        </CustomForm>

        <el-table :data="list" style="width: 100%" height="700" v-loading="tableloading">
            <el-table-column prop="user_id" label="用户ID" width="100" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="username" label="用户名称" align="center" width="120">
            </el-table-column>
            <el-table-column prop="sfzh" label="身份证号" align="center">
            </el-table-column>
            <el-table-column prop="phone" label="手机号" align="center">
            </el-table-column>

            <el-table-column prop="add_time" label="添加时间" align="center">
            </el-table-column>
            <el-table-column prop="account" label="会员账户" align="center">
            </el-table-column>
            <el-table-column label="身份证正面" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 60px; height: 40px;border-radius: 4px;" :src="scope.row.id_pic"
                        :preview-src-list="[scope.row.id_pic]" fit="cover">
                        <div slot="error" class="image-slot">
                            <span>暂无图片</span>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="身份证背面" align="center">
                <template slot-scope="scope">
                    <el-image style="width: 60px; height: 40px;border-radius: 4px;" :src="scope.row.id_pic"
                        :preview-src-list="[scope.row.id_pic]" fit="cover">
                        <div slot="error" class="image-slot">
                            <span>暂无图片</span>
                        </div>
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="审核状态" align="center" width="100">
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 1" style="color:green;">审核通过</span>
                    <span v-else-if="scope.row.status == 0" style="color:blue;">未审核</span>
                    <span v-else-if="scope.row.status == 2" style="color:red;">审核失败</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" v-if="scope.row.status == 0"
                        @click="auditingHnadler(scope.row)">审核</el-button>
                    <el-button type="primary" size="mini" v-if="scope.row.status == 1" @click="addAccount(scope.row)">{{
                        scope.row.account ==
                            0 ? "添加会员账户" : "编辑会员账户" }}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="formInline.page" :page-sizes="[10, 20, 30, 50]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>


        <el-dialog class="carTrace" title="添加会员账户" top="5vh" :visible.sync="dialogAddAccount" width="50%" :modal="true">
            <el-form ref="form" :model="formAccount" label-width="80px" class="set-form">
                <el-form-item label="会员账户">
                    <el-input v-model="formAccount.account"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="sureAdd">确认添加</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog class="carTrace" title="审核会员" top="5vh" :visible.sync="auditingDialog" width="50%" :modal="true">
            <el-form ref="form" :model="auditingForm" label-width="80px" class="set-form">
                <el-form-item label="用户ID">
                    <el-input v-model="auditingForm.user_id"></el-input>
                </el-form-item>
                <el-form-item label="用户名称">
                    <el-input v-model="auditingForm.username"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="auditingForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="auditingForm.sfzh"></el-input>
                </el-form-item>
                <el-form-item label="添加时间">
                    <el-input v-model="auditingForm.add_time"></el-input>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="cross(1)">通 过</el-button>
                    <el-button type="danger" @click="rejectDialog = true">不通过</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog class="carTrace" title="填写不通过原因" top="5vh" :visible.sync="rejectDialog" width="50%" :modal="true">
            <el-form ref="form" :model="auditingForm" label-width="120px" class="set-form">
                <el-form-item label="不通过原因">
                    <el-input v-model="auditingForm.reason"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="cross(0)">确 认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { memberList, addMemberAccount, memberReview } from '@/api/vip'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            formInline: {
                name: "",
                cardId: "",//身份证号码
                tel: "",//电话号码
                time: "",//2024-05-05 - 2024-06-05
                status: "",//0全部1 审核通过2未审核3拒绝审核
                page: 1,
                pageSize: 10
            },
            pickerDateArr: [],
            list: [],
            total: 0,
            tableloading: false,
            dialogAddAccount: false,

            formAccount: {
                account: '',
                id: 0,
            },
            auditingDialog: false,
            auditingForm: {

            },//审核的form

            rejectDialog: false,
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        onSubmit() {
            this.formInline.page = 1;
            this.memberList();
        },
        resetTable() {
            this.formInline = {
                name: "",
                cardId: "",//身份证号码
                tel: "",//电话号码
                time: "",//2024-05-05 - 2024-06-05
                status: "",//0全部1 审核通过2未审核3拒绝审核
                page: 1,
                pageSize: 10
            };
            this.pickerDateArr = [];
            this.memberList();
        },
        changeDateSelect() {
            this.formInline.page = 1;
            this.memberList();
        },
        changeDatePicker(data) {
            console.log(data);
            if (data) {
                this.formInline.time = data.join(' - ');
            } else {
                this.formInline.time = "";
            }
        },
        async memberList() {
            this.tableloading = true;
            let res = await memberList(this.formInline);
            this.tableloading = false;
            if (res.code == 200) {
                this.list = res.data ? res.data.list : [];
                this.total = res.data.count;
            }
        },

        handleSizeChange(pageSize) {//改变pageSize
            this.formInline.pageSize = pageSize;
            this.memberList();
        },
        handleCurrentChange(page) {//改变page回调
            this.formInline.page = page;
            this.memberList();
        },

        addAccount(row) {
            this.formAccount.id = row.id;
            this.formAccount.account = row.account;
            this.dialogAddAccount = true;
        },
        async sureAdd() {
            let res = await addMemberAccount(this.formAccount);
            if (res.code == 200) {
                this.$message.success(res.msg)
            } else {
                this.$message.error(res.msg)
            }
            this.dialogAddAccount = false;
            this.memberList();
        },
        auditingHnadler(row) {
            this.auditingDialog = true;
            this.auditingForm = row;
            console.log(this.auditingForm);
        },
        async cross(status) {
            let res = await memberReview({
                id: this.auditingForm.id,
                user_id: this.auditingForm.user_id,
                reason: this.auditingForm.reason,
                status
            });
            if (res.code == 200) {
                this.$message.success(res.msg)
            } else {
                this.$message.error(res.msg)
            }
            this.auditingDialog = false;
            this.rejectDialog = false;

            this.memberList();
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.memberList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
::v-deep .el-table {

    // margin-top: 40px;
    .el-table__cell {
        padding: 8px 0;
    }

    .image-slot {
        line-height: 40px;
    }
}

::v-deep .el-pagination {
    margin-top: 20px;
}

.set-form {
    margin: 50px 30% 50px 30%;

    ::v-deep .el-input-number__increase {
        display: none;
    }

    ::v-deep .el-input-number__decrease {
        display: none;
    }

    ::v-deep .el-input-number {
        width: 100%;

        .el-input__inner {
            text-align: left;
        }
    }
}
</style>